<h1>{{title}}</h1>
<div class='dashboard'>
  <div class='dashboard-chart'></div>
</div>
<style>
  .dashboard-chart {
    width: 100%;
    height: 500px;
  }
</style>
<script>
  window.onload = function() {
    let el = document.querySelector('.dashboard-chart')
    let myChart = echarts.init(el);

    let data = [
      {
        name: '咨询类数量',
        value: 5000,
        pro: 50
      },
      {
        name: '投诉类数量',
        value: 3000,
        pro: 30
      },
      {
        name: '评价类数量',
        value: 2000,
        pro: 20
      }
    ]
    const pushZero = (n) => {
      if (n % 10 == 0) {
        return n + '.00'
      } else {
        return n
      }
    }
    let colors = ['#3B8CE9', '#5BC374', '#EA6672'];
    let dataNameMap = {
      '咨询类数量': 'zxl',
      '投诉类数量': 'tsl',
      '评价类数量': 'pjl'
    }
    let legendRichs = {
      title1: {
        color: '#999999',
        width: 120,
        align: 'left',
        height: 14,
        fontSize: 14,
        padding: [2, 0, 0, 4]
      },
      title2: {
        height: 14,
        color: '#999999',
        fontSize: 14,
        padding: [2, 0, 0, 0]
      },
      zhan: {
        height: 14
      },
      nsel: {
        width: 14,
        height: 14,
        backgroundColor: '#cccccc8a',
        borderRadius: 14,
      },
      nvalue1: {
        width: 120,
        fontSize: 18,
        color: '#999999',
        padding: [0, 0, 0, 14 + 4]
      },
      nvalue2: {
        fontSize: 18,
        color: '#999999',
      }
    };
    let selects = {};
    let legend = [];
    const computedLegendRichs = (DATA) => {
      DATA.map((item, index) => {
        legend.push(item.name)
        let mapK = dataNameMap[item.name];
        selects[item.name] = true;
        let _color = colors[index]

        let icon = `icon_` + mapK
        legendRichs[icon] = {
          width: 14,
          height: 14,
          backgroundColor: _color,
          borderRadius: 14,
        }

        let value1 = 'value1_' + mapK;
        let value2 = 'value2_' + mapK;
        legendRichs[value1] = {
          width: 120,
          fontSize: 18,
          color: _color,
          padding: [0, 0, 0, 14 + 4]
        }
        legendRichs[value2] = {
          fontSize: 18,
          color: _color,
        }
      })
    }

    computedLegendRichs(data);

    let option = {
      //你的代码
      color: colors,
      backgroundColor: "#fff",
      series: [
        {
          type: 'pie',
          radius: ['60%', '70%'],
          center: ['60%', '50%'],
          label: {
            show: false,
          },
          data: data,
          itemStyle: {
            borderWidth: 2,
            borderColor: '#fff'
          },
          minAngle: 3
        }
      ],
      legend: [
        {
          orient: 'vertical',
          left: '15%',
          top: 'center',
          icon: 'circle',
          formatter: (leg) => {
            let item = data.filter((V) => V.name == leg)[0];
            let mapK = dataNameMap[leg];
            let icon = 'icon_' + mapK;
            let value1 = 'value1_' + mapK;
            let value2 = 'value2_' + mapK;
            if (selects[leg]) {
              return `{${icon}|}{title1|${leg}}{title2|占比}\n{zhan|}\n{${value1}|${item.value}}{${value2}|${pushZero(item.pro)}%}`
            } else {
              // icon灰色
              return `{nsel|}{title1|${leg}}{title2|占比}\n{zhan|}\n{${value1}|${item.value}}{${value2}|${pushZero(item.pro)}%}`

              // 取消选择的全灰色
              // return `{nsel|}{title1|${leg}}{title2|占比}\n{zhan|}\n{nvalue1|${item.value}}{nvalue2|${pushZero(item.pro)}%}`
            }
          },  //14 + 14 + 18
          itemWidth: 0,
          itemHeight: 0,
          padding: 0,
          itemGap: 30,
          data: legend,
          textStyle: {
            rich: legendRichs
          }
        }
      ]
    };

    myChart.on('legendselectchanged', (event) => {
      selects = event.selected;
      myChart.setOption({
        legend: {}
      })
    })
    myChart.setOption(option)
  }
</script>